<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
        <!-- Vue中有2种数据绑定的方式:
        1单向绑(v-bind):数据只能从data流向页面。
        2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。备注:
        1.双向绑定一般都应用在表单类元素上(如: input、select等)
        2.v-model:value可以简写为v-model(例子:v-model="name")，因为v-model默认收集的就是value值。 -->



    <div id="root">
        <!-- 普通写法 -->
        单向数据绑定:<input type="text" v-bind:value="name"> <br>
        <!-- v-bind是单向数据绑定网页中input框中的数据改变无法是name的值改变 -->
        双向数据绑定:<input type="text" v-model:value="name"><br>

        <!-- 简写 -->
        单向数据绑定:<input type="text" :value="name"> <br>
        双向数据绑定:<input type="text" v-model="name"><br>
        <!-- 修饰符 -->
            <!-- 修饰符:lazy (只有在input输入框发生一个blur时才触发)-->
                <!-- 不是实时修改数据 -->
        (不是实时修改数据):<input type="text" v-model.lazy="name"><br>
        <p>{{name}}</p>
            <!-- 修饰符:number (将用户输入的字符串转换成number)-->
                <!-- 因为输入框默认拿到的值为字符串,使用.number后让后台拿到的数据是Number类型的 -->
        (数据类型为Number):<input type="text" v-model.number="name"><br>
            <!-- 修饰符:trim (将用户输入的前后的空格去掉)-->
        (将用户输入的前后的空格去掉):<input type="text" v-model.trim="name"><br>



        
        <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
        <!-- 
            因为表单类元素可以使用户与网页产生交互但是其他元素无法交互且不能输入也没有value值,
            没有value值就不能去向下传递值(name的值给予input字符串为向上,反之向下(自设)),就没有双向绑定的意义 
        -->
        <!-- <h2 v-model:x="name">你好啊</h2>  -->
    </div>
    
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'123',
        }
    })
</script>
</html>